<template>
	<view class="diySearch">
		<view class="diy-search">
		  <form @submit="onTargetSearch" >
		    <button formType="submit" class="btn-normal">
		      <view :class="['inner',itemStyle.searchStyle]">
		        <view class="search-input" :style="{textAlign:itemStyle.textAlign}">
		          <text class="search-icon iconfont icon-sousuo"></text>
		          <text> {{ params.placeholder }}</text>
		        </view>
		      </view>
		    </button>
		  </form>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object
		},
		data() {
			return {

			};
		},
		methods: {
			onTargetSearch() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.diySearch {
		.diy-search {
			background: #f1f1f2;
			padding: 20rpx 20rpx;
			font-size: 26rpx;
		}

		.diy-search .inner {
			height: 60rpx;
			background: #fff;
			overflow: hidden;
		}

		.diy-search .inner.radius {
			border-radius: 10rpx;
		}

		.diy-search .inner.round {
			border-radius: 60rpx;
		}

		.diy-search .inner .search-input {
			height: 60rpx;
			/* width: 100%; */
			line-height: 60rpx;
			color: #999;
			padding: 0 20rpx;
		}

	}
</style>
